<!-- 比赛注册页 -->
<template>
  <div class="login-container">
    <div class="container_box">
      <div class="container_center">
        <el-form
          :rules="rules"
          ref="ucenterMember"
          :model="ucenterMember"
          label-width="80px"
        >
          <!-- 手机号 -->
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="ucenterMember.mobile"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>

          <!-- 验证码 -->
          <el-form-item label="验证码" prop="code">
            <el-input
              v-model="ucenterMember.code"
              placeholder="请输入验证码"
            ></el-input>
          </el-form-item>

          <!-- 昵称 -->
          <el-form-item label="昵称" prop="nickname">
            <el-input
              v-model="ucenterMember.nickname"
              placeholder="请设置昵称"
            ></el-input>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ucenterMember.password"
              placeholder="请设置密码"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              round
              @click="submitFormRegister(ucenterMember)"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 验证码 -->
      <div class="VerificationCode">
        <el-button
          round
          type="success"
          :disabled="isCodeDisabled"
          @click="getCode"
          ref="btn1"
          >获取验证码</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import contestloginApi from "@/api/contestlogin";

export default {
  components: {},
  data() {
    return {
      // 验证码是否能点击 true：不行    false：可以
      isCodeDisabled: false,
      // true：登录页面   false：注册页面
      isUser: false,
      ucenterMember: {
        mobile: "", // 手机号
        code: "", // 验证码
        nickname: "上山打老虎", // 昵称
        password: "", // 密码
      },
      // 验证码倒计时五分钟
      codeTime: 300,
      rules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入11位手机号",
            trigger: "blur",
          },
          {
            validator(rule, value, callback) {
              contestloginApi.getMobileIsExist(value).then((response) => {
                if (response.data.code === 400) {
                  callback(new Error(response.data.message));
                }
                if (response.data.code === 200) {
                  callback();
                }
              });
            },
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "请输入4位数验证码",
            trigger: "blur",
          },
        ],
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "昵称长度为2 ~ 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "密码长度在 5 ~ 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      this.$refs.ucenterMember.validateField("mobile", (valid) => {
        if (valid) return;
        // 校验验证码
        contestloginApi.sendMsm(this.ucenterMember.mobile).then((response) => {
          if (response.code !== 200) return;
          // 禁止验证码点击按钮
          this.isCodeDisabled = true;
          // 验证码文字改成倒计时
          this.$refs.btn1.$el.innerText = this.codeTime;
          this.setCodeTime();
          this.$message({
            message: "验证码获取成功",
            type: "success",
          });
        });
      });
    },
    // 验证码倒计时功能
    setCodeTime() {
      if (this.codeTime == 1) {
        this.codeTime == 300;
        this.$refs.btn1.$el.innerText = "获取验证码";
        this.isCodeDisabled = false;
      } else {
        this.codeTime--;
        this.$refs.btn1.$el.innerText = this.codeTime;
      }
      // 每秒钟调用一次方法
      setTimeout(() => {
        this.setCodeTime();
      }, 1000);
    },
    // 注册
    submitFormRegister(ucenterMember) {
      this.$refs.ucenterMember.validate((valid) => {
        if (!valid) return;
        contestloginApi.getCode(ucenterMember.mobile).then((response) => {
          // 校验验证码是否正确
          if (ucenterMember.code != response.data.code) {
            this.$message.error("验证码错误");
            return;
          }
          contestloginApi.registerUser(ucenterMember).then((response) => {
            this.$message({
              message: "恭喜您，注册成功，我们将送您7天SIVIP7大礼包",
              type: "success",
            });
          });
        });
      });
    },
  },
};
</script>
<style scoped>
.container_box {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  width: 300px;
  height: 400px;
  border: 50% 50% red;
}
.container_center {
  position: relative;
  left: 50%;
  margin-left: -200px;
}
/* 验证码位置 */
.VerificationCode {
  position: relative;
  left: 461px;
  bottom: 278px;
}
</style>